<!--
 * @Author: gaojinyu 1593026814@qq.com
 * @Date: 2023-12-19 14:54:55
 * @LastEditors: gaojinyu 1593026814@qq.com
 * @LastEditTime: 2023-12-22 17:01:57
 * @FilePath: \smart-community\src\components\centerLayout1\index.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="center_content">
    <BoxTitleBig title="四大民生工程" subTitle="">
      <template #body>
        <div class="center_box">
          <div class="row1">
            <HappinessEducation ></HappinessEducation>
          </div>
          <div class="row2">
            <HappyWork ></HappyWork>
          </div>
          <div class="row3">
            <div class="grop1">
              <ProvideOldPeople></ProvideOldPeople>
            </div>
            <div class="grop2">
              <HealthyShenyang></HealthyShenyang>
            </div>
          </div>
        </div>
      </template>
    </BoxTitleBig>
  </div>
</template>

<script setup>
import HappinessEducation from "@/components/BussComponents/HappinessEducation.vue"
import HappyWork from "@/components/BussComponents/HappyWork.vue"
import ProvideOldPeople from "@/components/BussComponents/ProvideOldPeople.vue"
import HealthyShenyang from "@/components/BussComponents/HealthyShenyang.vue"
</script>

<style lang="scss" scoped>
.center_content {
  width: 100%;
  height: 100%;
  background: url(~@/assets/images/center_bg.png);
  background-size: 100% 100%;
  .center_box {
    width: 100%;
    height: 100%;
    padding: 0 24px;
    box-sizing: border-box;
    @include display(space-between, center, column);
    & > div {
      height: 0;
      width: 100%;
    }
    .row1 {
      flex-grow: 410;
    }
    .row2 {
      flex-grow: 510;
    }
    .row3 {
      flex-grow: 610;
      @include display(space-between, center, row);
      &>div{
        width: 0;
        flex-grow: 1;
        height: 100%;
      }
      .grop1{
        
      }
      .grop2{
        
      }
    }
  }
}
</style>
